<!--
@description ：首期风险清单
-->

<template>
  <div>
    <div class="caraWrap">
      <el-form :model="form" ref="form">
        <el-row :gutter="24">
          <el-col span="10">
            <el-form-item label="出单日期" prop="month">
              <el-date-picker
                v-model="form.month"
                type="monthrange"
                range-separator="至"
                style="width:70%"
                value-format="yyyyMM"
                start-placeholder="开始月份"
                end-placeholder="结束月份">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col span="6">
            <el-form-item prop="branchtype" label="渠道">
              <el-select v-model="form.branchtype" placeholder="请选择" clearable filterable style="width: 70%">
                <el-option v-for="item in enumOpt.branchTypeList" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item prop="riskType" label="风险类型">
              <el-select v-model="form.riskType" placeholder="请选择" clearable filterable style="width: 70%">
                <el-option v-for="item in enumOpt.riskTypeList" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="16">
            <el-form-item prop="status" label="状态">
              <el-checkbox-group v-model="form.status">
                <el-checkbox v-for="item in enumOpt.statusList" :key="item.dictValue" :label="item.dictValue"
                             name="policyYear">
                  {{ item.dictLabel }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col span="8" style="display: flex;justify-content: end;padding-right: 12px;align-items: center">
            <el-button type="primary" @click="" size="mini" style="margin: 12px 20px 0 0">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="caraWrap">
      <el-button type="primary" size="mini" style="margin-bottom: 12px">批量回销</el-button>
      <el-table ref="multipleTable" :data="dataList"  style="width: 100%;margin: 16px 0 12px">
        <el-table-column type="selection" width="60" label="" align="center" fixed="left"></el-table-column>
        <el-table-column type="index" width="80" label="序号" align="center" fixed="left"></el-table-column>
        <el-table-column v-for="(item,index) in columsList" :key="index" :label="item.label" :prop="item.prop" :min-width="item.minWidth || 100" :show-overflow-tooltip="item.showTip || false" align="center">
          <template slot-scope="scope">
            <span v-if="item.prop == 'h' && scope.row.h == '1'" style="color: #3982a8">{{ '正常单(机构核查)' }}</span>
            <span v-else-if="item.prop == 'h' && scope.row.h == '2'" style="color: #11d5c9">{{ '正常单(渠道担保)' }}</span>
            <span v-else-if="item.prop == 'h' && scope.row.h == '3'" style="color: #d111f2">{{ '疑似风险单' }}</span>
            <span v-else-if="item.prop == 'h' && scope.row.h == '4'" style="color: #90C596">{{ '风险单' }}</span>
            <span v-else-if="item.prop == 'h' && scope.row.h == '5'" style="color: #E9AB9A">{{ '问题单' }}</span>
            <span v-else-if="item.prop == 'i'" style="color: #11d5c9">{{ scope.row.i }}</span>
            <span v-else-if="item.prop == 'a'" style="color: rgb(90, 170, 244); text-decoration: underline;cursor: pointer">{{ scope.row.a }}</span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column width="180" label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              style="color: rgb(33, 122, 249);display: inline-block"
            >风险动态</el-button
            >
            <el-button
              size="mini"
              type="text"
              disabled
              style="color: rgb(33, 122, 249);display: inline-block"
            >下发</el-button
            >
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.h != 4"
              style="color: rgb(33, 122, 249);display: inline-block"
            >回访</el-button
            >
            <el-button
              size="mini"
              type="text"
              disabled
              style="color: rgb(33, 122, 249);display: inline-block"
            >回销</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>

export default {
  name: "firstRiskList", //首期风险清单
  props:{

  },
  components:{

  },
  data(){
    return{
       form: {
         month: [],
         branchType: '',
         riskType: '',
         status: [],
       },
       enumOpt: {
         branchTypeList: [],
         riskTypeList: [
           { dictValue: '1', dictLabel: '全部' },
           { dictValue: '2', dictLabel: '正常单(机构核查)' },
           { dictValue: '3', dictLabel: '正常单(渠道担保)' },
           { dictValue: '4', dictLabel: '疑似风险单' },
           { dictValue: '5', dictLabel: '风险单' },
           { dictValue: '6', dictLabel: '问题单' },
         ],
         statusList: [
           { dictValue: '1', dictLabel: '全部' },
           { dictValue: '2', dictLabel: '待回访' },
           { dictValue: '3', dictLabel: '待下发' },
           { dictValue: '4', dictLabel: '已回销' },
           { dictValue: '5', dictLabel: '已完成' },
         ],
       },

       columsList: [
         {label: '保单号', prop: 'a', showTip: false, minWidth: 100},
         {label: '管理机构', prop: 'b', showTip: false, minWidth: 140},
         {label: '销售部/组', prop: 'c', showTip: false, minWidth: 120},
         {label: '代理人', prop: 'd', showTip: false, minWidth: 100},
         {label: '投保人', prop: 'e', showTip: false, minWidth: 100},
         {label: '保单生效日', prop: 'f', showTip: false, minWidth: 110},
         {label: '保费', prop: 'g', showTip: false, minWidth: 100},
         {label: '风险类型', prop: 'h', showTip: false, minWidth: 120},
         {label: '状态', prop: 'i', showTip: false, minWidth: 100},
       ],
       dataList: [
         {
           a: '0000001',
           b: '江苏营销营业部',
           c: '张峰部/路明组',
           d: '罗大',
           e: '罗尔',
           f: '2023-03-10',
           g: '3000',
           h: '1',
           i: '待回访',
         },
         {
           a: '0000002',
           b: '宜兴营销营业部',
           c: '张对部/时明组',
           d: '示范',
           e: '都到',
           f: '2023-03-10',
           g: '5700',
           h: '2',
           i: '已回销',
         },
         {
           a: '0000003',
           b: '江阴营销营业部',
           c: '板上部/暗暗组',
           d: '方式',
           e: '北官',
           f: '2023-03-10',
           g: '5000',
           h: '3',
           i: '待下发',
         },
         {
           a: '0000004',
           b: '江苏营销营业部',
           c: '福寿部/是谁组',
           d: '瘩福',
           e: '随便',
           f: '2023-03-10',
           g: '3500',
           h: '4',
           i: '已完成',
         },
         {
           a: '0000005',
           b: '江苏营销营业部',
           c: '放到部/发送组',
           d: '仿佛',
           e: '李达',
           f: '2023-02-07',
           g: '4500',
           h: '5',
           i: '已回销',
         }
       ]
    }
  },
  watch:{

  },
  methods:{

  },
  mounted() {
    this.getDicts("sys_renewal_channel").then((res) => {
      if (res.code === 200) {
        this.enumOpt.branchTypeList = res.data
      }
    });
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.caraWrap{
  padding: 20px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 8px;
}
</style>
